<ion-header>
  <ion-navbar>
    <ion-title>
      探索
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="discover">
  <ion-row class="image-row">
    <ion-item-divider light class="sub-title">在线资源</ion-item-divider>

    <ion-col>
      <ion-card (click)="openRoadMapPage()">
        <button ion-item>
          <div class="explore-1"></div>
          <div class="card-title">学习路线</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openProjectListPage()">
        <button ion-item>
          <div class="explore-2"></div>
          <div class="card-title">练手项目</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openToolboxListPage()">
        <button ion-item>
          <div class="explore-3"></div>
          <div class="card-title">工具箱</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openArticlesListPage()">
        <button ion-item>
          <div class="explore-4"></div>
          <div class="card-title">在线文章</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-item-divider light class="sub-title">本地资源</ion-item-divider>

    <ion-col>
      <ion-card (click)="openExamPage()">
        <button ion-item>
          <div class="explore-5"></div>
          <div class="card-title">技能测验</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openSolutionPage()">
        <button ion-item>
          <div class="explore-6"></div>
          <div class="card-title">解决方案</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openThoughtWorksBookPage()">
        <button ion-item>
          <div class="explore-7"></div>
          <div class="card-title">读书路线</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openRecommendBookPage()">
        <button ion-item>
          <div class="explore-8"></div>
          <div class="card-title">书籍列表</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openRecommendArticlePage()">
        <button ion-item>
          <div class="explore-9"></div>
          <div class="card-title">文章列表</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col>
      <ion-card (click)="openTodoListsPage()">
        <button ion-item>
          <div class="explore-10"></div>
          <div class="card-title">待办列表</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-item-divider light class="sub-title">在线阅读</ion-item-divider>

    <ion-col class="online-read">
      <ion-card (click)="openEbook({title: 'Growth：全栈增长工程师实战', action: 'growthAction'})">
        <button ion-item>
          <img src="assets/images/home-1.thumbnail.jpg"/>
          <div class="card-title card-title-above">《Growth：全栈增长工程师实战》</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col class="online-read">
      <ion-card (click)="openEbook({title: 'Ideabook：练手项目集', action: 'ideabook'})">
        <button ion-item>
          <img src="assets/images/home-2.thumbnail.jpg"/>
          <div class="card-title card-title-above">《Ideabook：练手项目集》</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-col class="online-read">
      <ion-card (click)="openEbook({title: '我的职业是前端工程师', action: 'fe'})">
        <button ion-item>
          <img src="assets/images/home-3.thumbnail.jpg"/>
          <div class="card-title card-title-above">《我的职业是前端工程师》</div>
        </button>
      </ion-card>
    </ion-col>

    <ion-item-divider light class="sub-title">更多</ion-item-divider>

    <ion-col class="more">
      <ion-card  (click)="openGitHub('https://github.com/phodal/growth/issues')">
        <button ion-item>
          <img src="assets/images/home-3.thumbnail.jpg"/>
          <div class="card-title card-title-above">你还需要什么功能？</div>
        </button>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>
